<template>
  <div class="global_bg">
    <VantNavigationBar title="商品详情"></VantNavigationBar>
    <div class="info_bg">
      <div class="pdt_img">
        <img :src="'http://localhost:8090/' + productinfo.product_imge" />
      </div>
      <div class="info_cont mt1">
        <div class="product-info">
          <div v-if="productinfo" class="price">
            价格:
            <span class="price-value">{{
              '￥' + productinfo.product_price
            }}</span>
          </div>
          <div v-if="productinfo" class="name">
            商品名称:
            <span class="name-value">{{ productinfo.product_name }}</span>
          </div>
          <div v-if="productinfo" class="description">
            商品描述:
            <span class="description-value">{{ productinfo.product_dsc }}</span>
          </div>
          <div v-if="productinfo" class="time">
            上架时间:
            <span class="time-value">{{
              formattedDate(productinfo.product_time)
            }}</span>
          </div>
        </div>
        <van-action-bar>
          <div class="user_info">
            <span class="user-name">发布者：{{ productinfo.user_name }} </span>
          </div>
          <van-action-bar-button
            type="danger"
            color="#76AA28"
            text="我想要"
            @click="goChat"
          />
        </van-action-bar>
      </div>
    </div>
  </div>
</template>

<script>
import VantNavigationBar from '@/components/Navbar'
import {
  showImagePreview,
  Swipe,
  SwipeItem,
  ActionBar,
  ActionBarIcon,
  ActionBarButton,
} from 'vant'
import home from '@/api/home.js'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import routerURL from '@/router/routerURL.js'
import moment from 'moment'
import { useRouter } from 'vue-router'
export default {
  components: {
    VantNavigationBar,
    [showImagePreview.name]: showImagePreview,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [ActionBar.name]: ActionBar,
    [ActionBarIcon.name]: ActionBarIcon,
    [ActionBarButton.name]: ActionBarButton,
  },
  setup() {
    const route = useRoute()
    const productinfo = ref({})
    const router = useRouter()
    const formattedDate = () => {
      return moment().format('YYYY-MM-DD HH:mm:ss')
    }

    const productId = { product_id: route.params.productId }
    onMounted(() => {
      home.getproductInfo(productId).then((res) => {
        if (res.status === 200) {
          productinfo.value = res.data
        }
      })
    })

    const goChat = () => {
      const token = window.localStorage.getItem('token')
      if (!token) {
        // 如果本地存储中没有 token，则跳转到登录页面
        router.push({ path: '/login' })
      } else {
        router.push({ path: routerURL.CHATPAGE })
      }
    }
    return {
      productinfo,
      formattedDate,
      goChat,
      productId,
    }
  },
}
</script>

<style scoped>
.info_bg {
  display: flex;
  flex-flow: column;
}
.pdt_img {
  flex: 1;
}
.pdt_img > img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.info_cont {
  flex: 1;
  background: #fff;
}
.user_info {
  display: flex;
  width: 10rem;
  height: 100%;
}

.user_info > :nth-child(2) {
  display: inline-block;
  flex: 7;
}
.user-name {
  line-height: 3rem;
}
.product-info {
  font-family: Arial, sans-serif;
  padding: 10px;
  margin-bottom: 20px;
}

.product-info div {
  margin-bottom: 5px;
}

.price .price-value {
  color: #ff0000; /* 价格显示红色 */
}

.name .name-value {
  font-weight: bold; /* 商品名称加粗 */
}

.description .description-value {
  color: #666; /* 商品描述使用深灰色 */
}

.time .time-value {
  font-style: italic; /* 上架时间使用斜体 */
}
</style>
